<template>
    <!-- <div class="box">
        <el-card>
            <template #header>
                <h3>我的病历</h3>
            </template>
<el-form :model="medicalHistory" label-width="120px" :rules="rules" ref="medicalHistoryForm">
    <el-form-item label="姓名" prop="name">
        <p v-text="medicalHistory.resident_name"></p>
    </el-form-item>
    <el-form-item label="医生" prop="name">
        <p v-text="medicalHistory.doctor_name"></p>
    </el-form-item>
    <el-form-item label="问诊日期" prop="name">
        <p v-text="medicalHistory.visit_date"></p>
    </el-form-item>
    <el-form-item label="患者主诉" prop="name">
        <p v-text="medicalHistory.chief_complaint"></p>
    </el-form-item>
    <el-form-item label="现病史" prop="name">
        <p v-text="medicalHistory.present_illness"></p>
    </el-form-item>
    <el-form-item label="既往病史" prop="name">
        <p v-text="medicalHistory.past_medical_history"></p>
    </el-form-item>
    <el-form-item label="手术历史" prop="name">
        <p v-text="medicalHistory.past_surgical_history"></p>
    </el-form-item>
    <el-form-item label="诊断" prop="name">
        <p v-text="medicalHistory.diagnosis"></p>
    </el-form-item>
    <el-form-item label="治疗方案" prop="name">
        <p v-text="medicalHistory.treatment"></p>
    </el-form-item>
    <el-form-item label="医生备注" prop="name">
        <p v-text="medicalHistory.notes"></p>
    </el-form-item>
</el-form>
</el-card>
</div> -->
    <div class="box">
        <div class="records">
            <div v-for="item in medicalHistorys" class="record">
                <div class="record-title">
                    <div>就诊时间：{{ item.visit_date }}</div>
                </div>
                <div class="record-content">
                    <p>
                        <span class="name">医疗机构</span>
                        <span class="content">{{ item.institution }}</span>
                    </p>
                    <p>
                        <span class="name">科室名称</span>
                        <span class="content">{{ item.department }}</span>
                    </p>
                    <p>
                        <span class="name">医生姓名</span>
                        <span class="content">{{ item.doctor }}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { medicalHistoryFindAPI } from '@/api/medicalHistory';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            params: {
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id,
                // 搜索关键词
                doctor_id: '',
                institution_id: '',
                appointment_id: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            medicalHistorys: [],
            user: JSON.parse(sessionStorage.getItem('user'))
        }
    },
    methods: {
        loadMedicalHistory() {
            medicalHistoryFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.medicalHistorys = resp.data.datas;
                    console.log(this.medicalHistorys);

                }
                else {
                    ElMessage.error(resp.data.message);
                }
            })
        }
    },
    created() {
        this.loadMedicalHistory();
    }
}
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.records {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.record {
    padding: 10px;
    width: 100%;
}

.record .record-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: #3496ff;
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 5px 10px;
}

.record .record-title .record-status {
    display: flex;
    align-items: center;
    line-height: 20px;
}

.record .record-title .record-status .point {
    font-size: 30px;
    letter-spacing: -5px;
}

.record .record-title .record-status .status {
    font-size: 14px;

}

.record .record-content {
    align-items: start;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 5px 10px;
    font-size: 14px;
}

.record .record-content .name {
    color: #aaa;
}

.record .record-content .content {
    margin-left: 15px;
}
</style>